<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>推送消息</title>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <link href="../../static/css/style.css" rel="stylesheet">
    <script src="../../static/js/jquery.min.js"></script>
    <script src="../../static/js/jquery.cookie.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../static/js/base.js"></script>
    <script src="../../static/js/ax.js"></script>
    <!--[if lt IE 9]>
    <script src="../../static/js/html5.js"></script>
    <script src="../../static/js/respond.js"></script>
    <![endif]-->

</head>
<body>

<div class="layui-fluid">
    <div class="layui-card content-wrap">
        <!--查询-->
        <form class="layui-form layui-form-pane" id="pushStudentForm">
            <div class="layui-form-item">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-sm3">
                        <label class="layui-form-label">学员信息</label>
                        <div class="layui-input-block">
                            <input type="text" id="searchKey" placeholder="请输入学员姓名或证件号码" autocomplete="on" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-sm3">
                        <label class="layui-form-label">考试日期</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="examTime" placeholder="考试日期" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-col-sm3">
                        <label class="layui-form-label">准驾车型</label>
                        <div class="layui-input-block">
                            <select id="carType">
                                <option value="0">请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-sm3">
                        <a id="doSearch" class="layui-btn add_btn"><i class="layui-icon layui-icon-search"></i>搜索</a>
                        <button type="reset" class="layui-btn delete_btn"><i class="layui-icon layui-icon-delete"></i>清空</button>
                        <a id="btnSubmit" class="layui-btn add_btn btn-left">推送</a>
                    </div>
                </div>
            </div>
        </form>
        <!--数据列表展示-->
        <div>
            <table class="layui-hide" id="dataListTable"
                   lay-filter="active"></table>
        </div>
        <form class="layui-form layui-form-pane" id="pushMessageForm">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-sm12">
                    <label class="layui-form-label">消息模板</label>
                    <div class="layui-input-block">
                        <select lay-filter="messageTemplate" id="messageTemplate">
                            <option value="0">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-col-sm12" id="pushAppMsgContent" style="display: none">
                    <label class="layui-form-label">App推送模板：</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-col-sm12" id="pushWxPublicMsgContent" style="display: none">
                    <label class="layui-form-label">公众号推送模板：</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-col-sm12" id="pushWxAppletMsgContent" style="display: none">
                    <label class="layui-form-label">小程序推送模板：</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-col-sm12" id="pushSmsMsgContent" style="display: none">
                    <label class="layui-form-label">短信推送模板：</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
            <!--<div class="layui-input-block">-->
                <!--<button type="button" id="btnClose" class="layui-btn layui-btn-primary btn-left">关闭</button>-->
                <!--<a type="button" id="btnSubmit" class="layui-btn add_btn btn-left">提交</a>-->
            <!--</div>-->
        </form>

    </div>
</div>


</body>

<script>

    var phase;
    var pushType;

    var templateData = {
        messageTemplate:{
            id:0,   // 模板Id
            mtCode:'',   // 模板编号
            mtTitle:0   // 模板标题
        },
        mtContentForApp:'', // APP模板
        mtContentForPublic:'', // 微信公众号模板
        mtContentForApplet:'', // 微信小程序模板
        mtContentForSms:'', // 短信模板
        appPushParamList:[{     // APP推送参数列表
            mtpId:0,    // 参数项Id
            mtpItem:'', // 参数项
            mtpDesc:''  // 参数描述
        }],
        publicPushParamList:[{     // 公众号推送参数列表
            mtpId:0,    // 参数项Id
            mtpItem:'', // 参数项
            mtpDesc:''  // 参数描述
        }],
        appletPushParamList:[{     // 小程序推送参数列表
            mtpId:0,    // 参数项Id
            mtpItem:'', // 参数项
            mtpDesc:''  // 参数描述
        }],
        smsPushParamList:[{     // 短信推送参数列表
            mtpId:0,    // 参数项Id
            mtpItem:'', // 参数项
            mtpDesc:''  // 参数描述
        }]
    };

    var $;
    var table;
    var tableObj;

    layui.use(['table','form','laydate','layer','element'], function() {
        table = layui.table;
        $ = layui.$;
        var form = layui.form,
            layDateExamTime = layui.laydate,
            layer=layui.layer;

        // 初始化日期控件
        layDateExamTime.render({
            elem: '#examTime'
        });

        tableObj = ax.VTable({
            id: 'loadDataList',
            elem : '#dataListTable',
            url: schoolWebUrl + "/api/message/student/waitSendList",
            page:false,
            title:'学员列表',
            cols : [ [
                {type : 'checkbox', fixed : 'left'},
                {field : 'studentName', title : '学员姓名', width : 100, fixed : 'left' },
                {field : 'idNo', width : 200, title : '身份证号' },
                {field : 'studentPhone', width : 150, title : '学员电话' },
                {field : 'carName', width : 100, title : '准驾车型' },
                {field : 'examAddress', width : 200, title : '考试地点' },
                {field : 'examSubject', width : 100, title : '考试科目' },
                {field : 'examTime', width : 150, title : '考试时间' },
                {field : 'examResult', width : 150, title : '考试结果' },
                {field : 'coachName', width : 150, title : '教练姓名' },
                {field : 'coachPhone', width : 150, title : '教练电话' }
            ] ]
        });

        // 监听选择模板变化
        form.on('select(messageTemplate)', function(data){
            var tempId = data.value;
            if(tempId == "0") {
                $("#pushAppMsgContent").hide();
                $("#pushWxPublicMsgContent").hide();
                $("#pushWxAppletMsgContent").hide();
                $("#pushSmsMsgContent").hide();
            } else {
                getTemplateData(tempId);
            }
        });

        $('#doSearch').on('click', function(){
            searchData();
        });

        // $('#btnClose').on("click", function () {
        //     parent.layer.close(parent.layer.getFrameIndex(window.name));
        // });

        $('#btnSubmit').on('click', function(){
            var pushData = {
                phase : phase,
                pushType : pushType,
                mtId:$("#messageTemplate").val(),
                formId:"pushMessageForm",
                pushMessageForApp:$("#pushAppMsgContent textarea").val().trim(),
                pushMessageForPublic:$("#pushWxPublicMsgContent textarea").val().trim(),
                pushMessageForApplet:$("#pushWxAppletMsgContent textarea").val().trim(),
                pushMessageForSms:$("#pushSmsMsgContent textarea").val().trim(),
                studentList:[]
            };

            var checkStatus = table.checkStatus(tableObj.config.id);
            var data = checkStatus.data;
            $.each(data, function (index, studentItem) {
                pushData.studentList.push(studentItem);
            });
            if(checkData(pushData)) {

                layer.confirm("确定需要向选择的" + pushData.studentList.length + "个学员推送消息！", function (i) {
                    saveData(pushData);
                });
            }
        });

        var getTemplateData = function(dataId) {
            ax.get({
                url: schoolWebUrl + "/api/message/template/detail",
                data:{
                    dataId:dataId
                },
                success: function (res) {
                    if (res.code == 0) {
                        templateData = res.data;
                        resetPushContent();
                    } else {
                        layer.msg(res.message);
                    }
                }

            });
        };

        /**
         * 重置推送消息内容
         */
        var resetPushContent = function () {

            if(templateData.mtContentForApp.length > 0) {
                // 有APP消息模板
                $("#pushAppMsgContent textarea").val(templateData.mtContentForApp);
                $("#pushAppMsgContent").show();
            } else {
                $("#pushAppMsgContent textarea").val("");
                $("#pushAppMsgContent").hide();
            }
            if(templateData.mtContentForPublic.length > 0) {
                // 有微信公众号模板
                $("#pushWxPublicMsgContent textarea").val(templateData.mtContentForPublic);
                $("#pushWxPublicMsgContent").show();
            } else {
                $("#pushWxPublicMsgContent textarea").val("");
                $("#pushWxPublicMsgContent").hide();
            }
            if(templateData.mtContentForApplet.length > 0) {
                // 有微信小程序模板
                $("#pushWxAppletMsgContent textarea").val(templateData.mtContentForApplet);
                $("#pushWxAppletMsgContent").show();
            } else {
                $("#pushWxAppletMsgContent textarea").val("");
                $("#pushWxAppletMsgContent").hide();
            }
            if(templateData.mtContentForSms.length > 0) {
                // 有微信短信模板
                $("#pushSmsMsgContent textarea").val(templateData.mtContentForSms);
                $("#pushSmsMsgContent").show();
            } else {
                $("#pushSmsMsgContent textarea").val("");
                $("#pushSmsMsgContent").hide();
            }
        };

        var initPage = function() {
            // 获取消息模板列表
            ax.get({
                url: schoolWebUrl + "/api/message/template/listAll",
                success: function (res) {
                    if (res.code == 0) {
                        loadTemplateList(res.data);
                    } else {
                        layer.msg(res.message);
                    }
                }
            });

            // 获取准驾车型列表
            ax.post({
                url: schoolWebUrl + "/api/dict/getDict",
                contentType: "application/x-www-form-urlencoded",
                data:{"code":"car"},
                success: function (res) {
                    if (res.code == 0) {
                        loadCarTypeList(res.data);
                    } else {
                        layer.msg(res.message);
                    }
                }
            });
        };

        var loadTemplateList = function (tempList) {
            // 加载消息模板列表
            $("#messageTemplate").empty();
            $("#messageTemplate").append("<option value='0'>请选择</option>");
            $.each(tempList, function (index, tempObj) {
                var html = [];
                html.push("<option value='" + tempObj.id + "'>" + tempObj.mtTitle + "</option>");

                var $item = $(html.join(""));
                $item.data("data", tempObj);
                $("#messageTemplate").append($item);
            });
            form.render('select');
        };

        var loadCarTypeList = function (carTypeList) {
            // 加载准驾车型列表
            $("#carType").empty();
            $("#carType").append("<option value='0'>请选择</option>");
            $.each(carTypeList, function (index, carType) {
                $("#carType").append("<option value='" + carType.id + "'>" + carType.code + "</option>");
            });
            form.render('select');
        };

        // 获取参数
        phase = getQueryString("phase");
        pushType = getQueryString("pushType");

        // 初始化界面数据：模板列表
        initPage();
    });

    function searchData() {
        //执行重载
        tableObj.reload({
            page : {
                curr: 1 //重新从第 1 页开始
            },
            where : {
                searchKey : $('#searchKey').val(),
                examTime : $('#examTime').val(),
                carId : $('#carType').val(),
                phase : phase,
                pushType : pushType
            }
        });
    }

    /**
     * 消息校验
     */
    function checkData(pushData) {
        var checkResult = true;
        if(pushData.studentList.length == 0) {
            layer.msg("请选择接收消息的学员");
            checkResult = false;
        } else if(pushData.mtId == 0) {
            layer.msg("请选择推送消息模板");
            checkResult = false;
        } else {
            if(pushData.pushMessageForApp == "" && templateData.mtContentForApp != "") {
                layer.msg("APP消息内容不能为空");
                checkResult = false;
            } else if(pushData.pushMessageForPublic == "" && templateData.mtContentForPublic != "") {
                layer.msg("公众号消息内容不能为空");
                checkResult = false;
            } else if(pushData.pushMessageForApplet == "" && templateData.mtContentForApplet != "") {
                layer.msg("小程序消息内容不能为空");
                checkResult = false;
            } else if(pushData.pushMessageForSms == "" && templateData.mtContentForSms != "") {
                layer.msg("短信消息内容不能为空");
                checkResult = false;
            }
        }
        return checkResult;
    }

    /**
     * 推送消息
     */
    function saveData(pushData) {
        ax.post({
            url: schoolWebUrl + "/api/message/pushMessage",
            data: JSON.stringify(pushData),
            // beforeSend: function(){
            //     layer.msg('消息推送中.', {
            //         icon: 16,
            //         shade: 0.01,
            //         time: 0
            //     });
            // },
            success: function (res) {
                if (res.code == 0) {
                    topFrame.location.reload();
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                } else {
                    layer.msg(res.message);
                }
            }

        });
    }

</script>
</html>